<template>
    <div class="property-box">

        <source-url></source-url>
        <pre-hash-table></pre-hash-table>
         <selection :visible="getTables.length>0">
            <span slot='header'>预定义变量</span>
            <div slot='body'>
                <div class="property-item-body">
                    <div v-for="(item,index) in formulas.variables" :key="index">
                       <span class="item">
                            <span class="key">{{ index }}</span>
                            <span class="value">{{ item }}</span>
                            <el-button type="danger" size="mini" circle class="btn" @click="deleteItem(index)">
                                <i class="fa fa-trash"></i>
                            </el-button>
                       </span>
                    </div>
                </div>
            </div>
        </selection>

    </div>
</template>

<script>
import {mapMutations,mapGetters} from 'vuex';
import Selection from '../common/selection.vue';
import SourceUrl from './property/sourceUrl.vue'
import PreHashTable from './property/preHashTable';

export default {
    data(){
        return {
            activeName:''
        }
    }, 
    computed:{
        ...mapGetters(['getDialogStatus','getCurrentActiveTable','getTables']),

        formulas(){
            if(this.getTables.length>0  &&  this.getCurrentActiveTable){
                return this.getCurrentActiveTable.table.settings.formulas
            }else{
                return [];
            }
        },
        
    },
    watch:{
        
    },
    methods:{
        ...mapMutations(['setDialogStatus','closeAllDialog','updateFormulas','deleteFormulas','updateFormulas']),

        /**
         * 删除公式绑定
         */
        deleteItem(index){
            this.deleteFormulas({
                tableIndex:this.getCurrentActiveTable.index,
                formulasIndex:index
            });
        }
    },

    components:{
        Selection,
        SourceUrl,
        PreHashTable
    }
}
</script>

<style>
.property-box{
    margin: 0;
    position: relative;
    width: 98%;
    margin-left:1%;
    height: 100%;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
}

.property-item-body .item{
    width: 100%;
    vertical-align: top;
    display: inline-block;
    margin: 0;
    padding:3px 0;
    height: 30px;
    overflow:hidden;
    white-space:nowrap;
    
}
.property-item-body .item:hover{
    background: #eee;
    cursor: pointer;
    color:#fff;
}
.property-item-body .item .key{
    vertical-align: top;
    display: inline-block;
    color: #000;
    padding:1%;
    margin-top: 2px;
    width: 20%
}
.property-item-body .item .value{
    vertical-align: top;
    display: inline-block;
    color: #666;
    padding:1%;
    margin-top: 2px;
    width: 56%;
    overflow: hidden
}

.property-item-body .item .value input{
    margin: 0;
    padding: 5px;
    border:none;
    outline: none;
    width: 100%
}
.property-item-body .item .btn{
   display: none
}
.property-item-body .item:hover .btn{
   display: inline-block
}

</style>
